<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Images in PyCairo</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="PyCairo, graphics, Python, 2D vector library, images">
<meta name="description" content="In this part of the PyCairo tutorial, we work
with images.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Images in PyCairo</h1>


<p>
In this part of the PyCairo tutorial, we will talk about images. 
We will show how to display a PNG and JPEG image on the GTK window. 
We will also draw some text on an image.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<h2>Displaying a PNG image</h2>

<p>
In the first example, we will display a PNG image. 
</p>

<pre class="code">
#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program shows how to draw 
an image on a GTK window in PyCairo.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''

from gi.repository import Gtk
import cairo


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()
        
        self.init_ui()
        self.load_image()
        
        
    def init_ui(self):    

        darea = Gtk.DrawingArea()
        darea.connect("draw", self.on_draw)
        self.add(darea)

        self.set_title("Image")
        self.resize(300, 170)
        self.set_position(Gtk.WindowPosition.CENTER)
        self.connect("delete-event", Gtk.main_quit)
        self.show_all()
        
        
    def load_image(self):
        
        self.ims = cairo.ImageSurface.create_from_png("stmichaelschurch.png")
        
            
    def on_draw(self, wid, cr):

        cr.set_source_surface(self.ims, 10, 10)
        cr.paint()
        
    
def main():
    
    app = Example()
    Gtk.main()
        
        
if __name__ == "__main__":    
    main()
</pre>

<p>
The example displays an image. 
</p>

<pre class="explanation">
self.ims = cairo.ImageSurface.create_from_png("stmichaelschurch.png")
</pre>

<p>
We create an image surface from a PNG image. 
</p>

<pre class="explanation">
cr.set_source_surface(self.ims, 10, 10)
</pre>

<p>
We set a source for painting from the previously created image surface.
</p>

<pre class="explanation">
cr.paint()
</pre>

<p>
We paint the source on the window.
</p>

<img src="/img/gfx/pycairo/showimage.png" alt="Showing an image">
<div class="figure">Figure: Showing an image</div>


<h2>Displaying a JPEG image</h2>

<p>
PyCairo has built-in support only for PNG images. Other images can be
displayed via the <code>GdkPixbuf.Pixbuf</code> object. It is
a GTK object for manipulating images.
</p>

<pre class="code">
#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program shows how to draw 
an image on a GTK window in PyCairo.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''


from gi.repository import Gtk, Gdk, GdkPixbuf
import cairo


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()
        
        self.init_ui()
        self.load_image()
        
        
    def init_ui(self):    

        darea = Gtk.DrawingArea()
        darea.connect("draw", self.on_draw)
        self.add(darea)

        self.set_title("Image")
        self.resize(300, 170)
        self.set_position(Gtk.WindowPosition.CENTER)
        self.connect("delete-event", Gtk.main_quit)
        self.show_all()
        
        
    def load_image(self):
        
        self.pb = GdkPixbuf.Pixbuf.new_from_file("stmichaelschurch.jpg")
        

    def on_draw(self, wid, cr):

        Gdk.cairo_set_source_pixbuf(cr, self.pb, 5, 5)
        cr.paint()
        
    
def main():
    
    app = Example()
    Gtk.main()
        
        
if __name__ == "__main__":    
    main()
</pre>

<p>
In this example, we display a JPEG image on the window.
</p>

<pre class="explanation">
from gi.repository import Gtk, Gdk, GdkPixbuf 
</pre>

<p>
In addition to Gtk we will also need Gdk and GdkPixbuf modules.
</p>

<pre class="explanation">
self.pb = GdkPixbuf.Pixbuf.new_from_file("stmichaelschurch.jpg") 
</pre>

<p>
We create a <code>GdkPixbuf.Pixbuf</code> from a JPEG file. 
</p>

<pre class="explanation">
Gdk.cairo_set_source_pixbuf(cr, self.pb, 5, 5)
cr.paint() 
</pre>

<p>
The <code>Gdk.cairo_set_source_pixbuf()</code> method sets the
pixbuf as a source for painting. 
</p>


<h2>Watermark</h2>

<p>
It is common to draw information on images. The text written on an image
is called a watermark. Watermarks are used to identify images. They could
be copyright notices or image creation times.

</p>

<pre class="code">
#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program draws a watermark
on an image.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''

from gi.repository import Gtk
import cairo


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()
        
        self.init_ui()
        self.load_image()
        self.draw_mark()
        
        
    def init_ui(self):    

        darea = Gtk.DrawingArea()
        darea.connect("draw", self.on_draw)
        self.add(darea)

        self.set_title("Watermark")
        self.resize(350, 250)
        self.set_position(Gtk.WindowPosition.CENTER)
        self.connect("delete-event", Gtk.main_quit)
        self.show_all()
        
        
    def load_image(self):
        
        self.ims = cairo.ImageSurface.create_from_png("beckov.png")
        
        
    def draw_mark(self):
        
        cr = cairo.Context(self.ims)
        cr.set_font_size(11)
        cr.set_source_rgb(0.9 , 0.9 , 0.9)
        cr.move_to(20 , 30)
        cr.show_text(" Beckov 2012 , (c) Jan Bodnar ")
        cr.stroke()          
        
            
    def on_draw(self, wid, cr):

        cr.set_source_surface(self.ims, 10, 10)
        cr.paint()
        
    
def main():
    
    app = Example()
    Gtk.main()
        
        
if __name__ == "__main__":    
    main()
</pre>

<p>
We draw copyright information on an image.
</p>

<pre class="explanation">
def load_image(self):
    
    self.ims = cairo.ImageSurface.create_from_png("beckov.png")
</pre>

<p>
In the load_image() method, we create an image surface from a
PNG image. 
</p>

<pre class="explanation">
def draw_mark(self):
    
    cr = cairo.Context(self.ims)
...
</pre>

<p>
In the draw_mark() method, we draw the copyright message on the image.
First we create a drawing context from the image surface.
</p>

<pre class="explanation">
cr.set_font_size(11)
cr.set_source_rgb(0.9 , 0.9 , 0.9)
cr.move_to(20 , 30)
cr.show_text(" Beckov 2012 , (c) Jan Bodnar ")
cr.stroke()   
</pre>

<p>
Then we draw a small text in white colour. 
</p>

<pre class="explanation">
def on_draw(self, wid, cr):

    cr.set_source_surface(self.ims, 10, 10)
    cr.paint()
</pre>

<p>
Finally, the image surface is drawn on the window.
</p>


<img src="/img/gfx/pycairo/watermark.jpg" alt="Watermark">
<div class="figure">Figure: Watermark</div>


<p>
This chapter covered images in PyCairo. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified August 22, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


